import React, { useState,useEffect, useHistory,useLocation,useParams,useRouteMatch } from 'react'

// useHistory
// useLocation
// useParams
// useRouteMatch


const Detail = (props) => {
    // const param = useParams();
    // const match = useRouteMatch();
    // console.log(param);
    // console.log(match);

    const [topic, setTopic] = useState({});
    useEffect(() => {
        // let id = param.id;//??
        // fetch('https://cnodejs.org/api/v1/topic/' + id)
        fetch('https://cnodejs.org/api/v1/topic/' + props.match.params.id)
            .then(res => res.json())
            .then(res => {
                console.log(res);
                res.data && setTopic(res.data);
            })
        //.catch(err=>console.log(err))//进入catch就是报错了
    }, [])

    return (
        <div>
            <ul>
                <li>
                    
                <img src={topic.author?.avatar_url} alt=''></img>
                </li>
                <li>{topic.author?.loginname}</li>
            </ul>
            <div dangerouslySetInnerHTML={{__html:topic.content}}></div>
        </div>
    )
}

export default Detail
